<template>
  <div class="mt-slider" :style="{'height': height+'px'}">
    <div class="mt-slider-scroller" :style="{'width': width+'px', 'height': height+'px'}">
      <slot></slot>  
    </div>
  </div>
</template>

<script>
let scroller

export default {
  data() {
    return {
      width: "",
    }
  },
  props: {
    //slider高度
    height: {
      type: Number,
      default: 300
    },
    //当前页
    index: {
      type: Number,
      default: 0
    },
    //切换速度
    transtionSpeed: {
      type: Number,
      default: 200
    },
  },
  mounted() {
    this.width = screen.width * 2
    //等待子组件节点挂在完
    setTimeout(() => {
      scroller = new IScroll(".mt-slider", {
        scrollX: true,
        scrollY: false,
        mouseWheel: true,
        disableTouch: true,
        disableMouse: true,
        disablePointer: true,
      })
    }, 100)
  },
  methods: {
  },
  watch: {
    index(v, ov) {
      if(v!==ov) {
        scroller.scrollTo(-(screen.width*this.index), 0, this.transtionSpeed)
      }
    }
  }
}
</script>

<style lang="scss">
@import "./style.scss";
</style>
